<!-- 通知公告栏 -->
<template>
  <div class="w-full">
    <div class="w-full flex justify-between items-center">
      <el-tabs
        v-model="tab"
        class="calendarTabs"
        addable
        @tab-add="openForm('create')"
        @tab-change="handleTabChange"
      >
        <el-tab-pane
          label="日程"
          v-loading="!list.length && loading"
          name="schedule"
          key="schedule"
        >
          <lists :list="list" @click-item="clickItem" :loading="loading" />
        </el-tab-pane>
        <el-tab-pane
          label="会议"
          v-loading="!meetingList.length && loading"
          name="meeting"
          key="meeting"
        >
          <lists :list="meetingList" @click-item="clickItem" :loading="loading" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- <lists :list="list" @click-item="clickItem" :loading="loading" /> -->
    <!-- 表单弹窗：添加/修改 -->
    <ScheduleForm ref="formRef" @success="getList(dayDate, true)" />
    <MeetingReserveForm ref="meetingFormRef" @success="getMeetingList(dayDate, true)" />
  </div>
</template>
<script lang="ts" setup>
import lists from './lists.vue'
import ScheduleForm from '@/views/school/schedule/ScheduleForm.vue'
import MeetingReserveForm from '@/views/school/meeting/reserve/MeetingReserveForm.vue'
import { ScheduleApi, ScheduleVO } from '@/api/school/schedule'
import { MeetingReserveApi, MeetingReserveVO } from '@/api/school/meeting/reserve'
import { useRouter } from 'vue-router'
import { formatDate, beginOfDay, endOfDay } from '@/utils/formatTime'
const props = defineProps({
  dayDate: {
    type: Date,
    default: ''
  }
})
const emits = defineEmits(['tab-change', 'refresh'])
const router = useRouter()
const tab = ref('schedule')
const toast = useMessage()
const list = ref<ScheduleVO[]>([])
const meetingList = ref<MeetingReserveVO[]>([])
const loading = ref(false)

const getList = async (date: Date, isEmit?: boolean) => {
  try {
    loading.value = true
    const day = formatDate(date, 'YYYYMMDD')
    const res = await ScheduleApi.getScheduleByDay(day)
    list.value = res || []
    if (isEmit) {
      emits('refresh')
    }
  } catch (error) {
    toast.error('获取日程失败')
  } finally {
    loading.value = false
  }
}
const getMeetingList = async (date: Date, isEmit?: boolean) => {
  try {
    loading.value = true
    const day = formatDate(date, 'YYYYMMDD')
    const res = await MeetingReserveApi.getMeetingReserveByDay(day)
    meetingList.value = res || []
    if (isEmit) {
      emits('refresh')
    }
  } catch (error) {
    toast.error('获取会议预约失败')
  } finally {
    loading.value = false
  }
}
const handleTabChange = (tab) => {
  emits('tab-change', tab)
}
watch(
  () => {
    return {
      dayDate: props.dayDate,
      curTab: tab.value
    }
  },
  ({ dayDate, curTab }) => {
    if (dayDate) {
      if (curTab === 'schedule') {
        getList(dayDate)
      } else {
        getMeetingList(dayDate)
      }
    }
  },
  {
    immediate: true
  }
)
const clickItem = () => {
  const dayDate = formatDate(props.dayDate, 'YYYY-MM-DD')
  if (tab.value === 'schedule') {
    router.push(`/school/schedule?dayDate=${dayDate}`)
  } else {
    router.push(`/school/meeting/meeting-reserve?dayDate=${dayDate}`)
  }
}
const formRef: any = ref(null)
const meetingFormRef: any = ref(null)
const openForm = (type: string, id?: number) => {
  let curFormRef = formRef
  if (tab.value === 'meeting') {
    curFormRef = meetingFormRef
  }
  curFormRef.value.open(type, id, {
    startTime: beginOfDay(props.dayDate).getTime(),
    endTime: endOfDay(props.dayDate).getTime()
  })
}
</script>
<style lang="scss" scoped>
.calendarTabs {
  flex: 1;

  :deep() {
    .el-tab-pane {
      display: flex;
      gap: 20px;
    }

    .el-tabs__header {
      margin-bottom: 13px;
    }

    .el-tabs__item {
      height: auto;
      margin-bottom: 8px;
    }

    .el-tabs__new-tab {
      margin-top: 0;
      margin-bottom: 4px;
    }
  }
}
</style>
